<template>
    <div class="group_chang_infos_box">
        <div class="info_chang_search">
            <div class="tabs">
                <div class="tabs-label">当前位置：</div>
                <div class="tabs-items">
                    <div @click="$router.push({name: 'home'})" class="tabs-item">首页</div>
                    <div @click="$router.push({name: 'groups'})" class="tabs-item"> > 产品商城</div>
                    <template v-for="(item,index) in productInfo.p_info">
                        <div v-if="item.name != ''" @click="routerCuse(item,index)" class="tabs-item"> > {{item.name}}</div>
                    </template>
                </div>
            </div>
            <search-box></search-box>
        </div>
        <div class="banner_infos">
            <div class="product_banner_box">
                <div class="product_banner">
                    <swiper class="swiper" :options="swiperOption" v-if="productInfo.images && productInfo.images.length > 1">
                        <swiper-slide v-for="(item,index) in productInfo.images" :key="index">
                            <img class="gc-preview" :src="item">
                        </swiper-slide>
                        <div class="swiper-pagination" slot="pagination"></div>
                    </swiper>
                    <el-image v-else-if="productInfo.images.length == 1"
                              v-for="(item,index) in productInfo.images"
                              class="gc-preview"
                              style="width: 100%; height: 100%;"
                              :src="item"
                              fit="contain"></el-image>
                </div>
                <div class="other_product">
                    <div class="title_info">
                        <div class="line"></div>
                        <div class="title_txt">关联产品</div>
                    </div>
                    <div class="outher">
                        <div @click="goDetails(item.id)" class="box_hout_info" v-for="(item,index) in productInfo.relation" :key="index">
                            <div class="box_img">
                                <img :src="item.cover" class="img_box">
                            </div>
                            <div class="title_json">
                                <div class="titles">{{ item.name }}</div>
                                <div class="jsons">{{ item.info }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab_infos">
            <div class="tab_box" @click="changActive(item.id)" :class="{'active_chang':item.id==activeId}"
                 v-for="(item,index) in productInfo.text_list" :key="index">{{ item.title }}
            </div>
            <div @click="downLoadShow=true" class="tab_box tar_bg">产品资料下载</div>
        </div>
        <div class="product_content">
            <template v-if="activeId==0">
                <div class="box_chilid_one">
                    <div class="product_title_infos">产品说明{{ lengthNum }}</div>
                    <div class="rich_text" v-html="productInfo.text"></div>
                    <template v-if="productInfo.default_text">
                        <div class="box_info_case" :key="index" v-for="(item,index) in productInfo.default_text.info">
                            <div class="product_title_infos">{{ item.title }}</div>
                            <div class="rich_text gc-preview" v-html="item.text"></div>
                        </div>
                    </template>
                    <div class="box_info_spec_content">
                        <div class="spec_info" v-for="(item,index) in specList" :key="index">
                            <div class="info_title">{{ item.spec_name }}</div>
                            <div class="info_caser_infos">
                                <img class="gc-preview" :src="item.spec_cover">
                                <div class="spec_titles">
                                    <div class="spec_infos">{{ item.spec_info }}</div>
                                    <!--                  <div class="spec_infos">{{ item.spec_apply }}-{{ productInfo.name }}</div>-->
                                </div>
                            </div>
                            <div class="tab_spec_infos">
                                <div class="box_chang_modor"
                                     :class="{
                                        'active_tab':indexs==0,
                                        'even': indexs>0 && indexs % 2 == 1,
                                        'odd': indexs>0 && indexs % 2 == 0,
                                        'active_height':items.chexk,
                                         search: searchModel(items)
                                     }"
                                     v-for="(items,indexs) in item.model_list"
                                     :key="indexs">
                                    <div class="tab_item_infos" :id="'model_item_' + items.id" :class="{search: items.search}">
                                        <div class="car_tabs" :style="{width:1200/items.list.length+'px'}"
                                             v-for="(itemchild,indexchild) in items.list" :key="indexchild">
                                            <div :class="{'last_child':items.list.length-1 == indexchild && indexs!=0}"
                                                 v-if="items.list.length-1 == indexchild && indexs!=0">
                                                <div class="adre_box_infs">
                                                    <input onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" @input="changTxtNum($event,index,indexs)"
                                                           v-model="items.num"/>
                                                    <div class="num_box">
                                                        <div @click="changNum(index,indexs,'add')">
                                                            <img src="../assets/pro-top.png">
                                                        </div>
                                                        <div @click="changNum(index,indexs,'reduce')">
                                                            <img src="../assets/pro-bottom.png">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="ar_btns" @click="userAddCart(items.id,items.num)">加入购物车</div>
                                            </div>
                                            <div v-else-if="indexs!=0 && indexchild == items.price_idx" :class="{'contan_tasb':indexs!=0}">
                                                <span v-if="items.price_type == 2">{{itemchild}}</span>
                                                <el-dropdown v-else trigger="click">
                                                    <span class="el-dropdown-link">
                                                        ￥{{itemchild}} <i v-if="items.more_price.length" class="el-icon-arrow-down el-icon--right"></i>
                                                    </span>
                                                    <el-dropdown-menu v-if="items.more_price.length" slot="dropdown">
                                                        <el-dropdown-item v-for="mprice in items.more_price">
                                                            {{mprice.num}}{{items.unit}} ￥{{mprice.price}}
                                                        </el-dropdown-item>
                                                    </el-dropdown-menu>
                                                </el-dropdown>
                                            </div>
                                            <div v-else @click="changActiveCheck(index,indexs)" :class="{'contan_tasb':indexs!=0}">
                                                <img v-if="indexchild==0 && items.chexk" src="../assets/pro-xiala.png">
                                                <img v-if="indexchild==0 && !items.chexk" src="../assets/pro-zhankai.png">
                                                <el-tooltip
                                                    v-if="indexs!=0"
                                                    class="item"
                                                    effect="dark"
                                                    :content="itemchild"
                                                    transition="el-fade-in-linear"
                                                    :enterable="false"
                                                    placement="top">
                                                    <span>{{itemchild}}</span>
                                                </el-tooltip>
                                                <span v-else>{{itemchild}}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div v-if="indexs!=0" class="chang_tab_list_infos">
                                        <img @click="changActiveCheck(index,indexs)" class="close_info"
                                             src="../assets/window-icon-close-black.png">
                                        <div class="json_infos" style="margin-bottom: 29px">{{ items.model_name }}</div>
                                        <div class="splect_model">
                                            <div class="mode_list" :key="indexMode" v-for="(itemMode,indexMode) in items.info">
                                                <div class="item-lable">{{itemMode.name}}:</div>
                                                <div class="item-value">{{itemMode.val}}</div>
                                            </div>
                                            <div class="mode_list" v-if="items.info.length % 2"></div>
                                        </div>
                                        <div class="download_btn">
                                            <div @click="downloadThisFile(items.pdf)">PDF图纸下载</div>
                                            <div @click="downloadThisFile(items.step)">STEP模型下载</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
            <template v-else>
                <div class="box_chilid_one">
                    <div class="box_info_case" :key="index" v-for="(item,index) in productTextInfo">
                        <div class="product_title_infos">{{ item.title }}</div>
                        <div class="rich_text gc-preview" v-html="item.text"></div>
                    </div>
                </div>
            </template>
        </div>
        <transition name="slide-fade">
            <div class="city_location_box" v-if="downLoadShow">
                <div class="location_box" v-loading.fullscreen.lock="fullscreenLoading">
                    <div class="tips_title">产品资料下载</div>
                    <div class="line"></div>
                    <img @click="downLoadShow=false" src="../assets/window-icon-close-black.png" class="close">
                    <div class="content_box_infos">
                        <div class="chec_box_ounte" @click="changCheck(index)" v-for="(item,index) in productInfo.information"
                             :key="index">
                            <div class="check_box">
                                <img src="../assets/choice.png" v-if="item.check">
                            </div>
                            <div class="check_name">{{ item.name }}</div>
                        </div>
                    </div>
                    <div class="content_box_infos">
                        <div class="chec_box_ounte" @click="changCheckType(item.type)" v-for="(item,index) in downLoadType"
                             :key="index">
                            <div class="check_box">
                                <img src="../assets/choice.png" v-if="item.type==typeInLoad">
                            </div>
                            <div class="check_name">{{ item.name }}</div>
                        </div>
                    </div>
                    <div class="tips_btn" @click="downLoad">确定</div>
                    <div class="tips_info">生成文件过程中可能会有一些延迟，还请耐心等待</div>
                </div>
            </div>
        </transition>
        <transition name="slide-fade">
            <div class="city_location_box_infos" v-if="carShow">
                <div class="location_box">
                    <img @click="carShow=false" class="colses" src="../assets/window-icon-close-black.png">
                    <div class="login_icons">
                        <img src="../assets/registered-successfully-red.png">
                        <div>加入成功</div>
                    </div>
                </div>
            </div>
        </transition>
        <image-preview></image-preview>
    </div>
</template>

<script>
    import 'swiper/dist/css/swiper.css'
    import {swiper, swiperSlide} from 'vue-awesome-swiper'
    import {addCart, getGoodsInfo, getGoodsSpecInfo, getGoodsTextInfo, goodsMake} from "@/api/apis";
    import SearchBox from "@/components/searchBox";
    import ImagePreview from "../components/ImagePreview";

    export default {
        name: "productDetails",
        components: {
            ImagePreview,
            SearchBox,
            swiper,
            swiperSlide
        },
        data() {
            return {
                swiperOption: {
                    autoplay: true,
                    loop: true,
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true
                    },
                },
                activeId: 0,
                goods_id: '',
                productInfo: {},
                productTextInfo: [],
                fullscreenLoading: false,
                downLoadShow: false,
                specList: [],
                priceIndex: '',
                carShow: false,
                downLoadType: [
                    // {
                    //     name: 'WORD',
                    //     type: 2
                    // },
                    {
                        name: 'PDF',
                        type: 1
                    }
                ],
                typeInLoad: 1,
            }
        },
        computed: {
            lengthNum() {
                if (this.productInfo.length) {
                    this.productInfo.map(item => {
                        item.model_list.map((items, index) => {
                            if (index == 0) {
                                return items.price_idx;
                            }
                        })
                    })
                }
            }
        },
        mounted() {
            if (this.$route.query.goods_id) {
                this.goods_id = this.$route.query.goods_id
            }
            this.GetGoodsInfo()
            this.GetGoodsSpecInfo()
        },
        methods: {
            changCheckType(e) {
                this.typeInLoad = e
            },
            goDetails(e) {
                this.$router.push({name: 'productDetails', query: {goods_id: e}})
            },
            routerCuse(e) {
                if (parseInt(e.id) > 0) {
                    if (e.is_end == 1) {
                        this.$router.push({name: 'filterGroups', query: {group_id: e.id}});
                    } else {
                        this.$router.push({name: 'groups', query: {group_id: e.id}});
                    }
                }
            },
            userAddCart(model_id, num) {
                let data = {model_id: model_id, num: num}
                addCart(data).then(() => {
                    this.$store.commit('changeCartNumber');
                    this.carShow = true
                    setTimeout(() => {
                        this.carShow = false
                    }, 500)
                })
            },
            changTxtNum(e, index, indexs) {
                this.specList[index].model_list[indexs].num = e.target.value
                this.priceChang(this.specList[index].model_list[indexs].num, index, indexs)
            },
            //数量改变
            changNum(index, indexs, type) {
                if (type == 'add') {
                    this.specList[index].model_list[indexs].num += 1
                } else {
                    if (this.specList[index].model_list[indexs].num > 1) {
                        this.specList[index].model_list[indexs].num -= 1
                    }
                }
                this.priceChang(this.specList[index].model_list[indexs].num, index, indexs)
            },
            //价格改变
            priceChang(num, index, indexs) {
                let obj = this.specList[index].model_list[indexs]
                obj.list[this.priceIndex] = obj.old
                if (obj.more_price.length) {
                    obj.more_price.map(items => {
                        if (num >= items.num) {
                            obj.list[this.priceIndex] = items.price
                        }
                    })
                }
            },
            downLoad() {
                let arr = []
                if (this.productInfo.information.length) {
                    this.productInfo.information.map(item => {
                        if (item.check) {
                            arr.push(item.val)
                        }
                    })
                }
                if (arr.length) {
                    this.fullscreenLoading = true;
                    let data = {goods_id: this.goods_id, list: arr, type: this.typeInLoad}
                    goodsMake(data).then(res => {
                        this.fullscreenLoading = false
                        this.downLoadShow = false
                        window.open(res.data)
                    })
                } else {
                    this.$message.warning('请选择需要下载的资料')
                }
            },
            downloadThisFile(file) {
                if (file) {
                    window.open(file)
                } else {
                    this.$message.warning('当前型号没有文件可以下载')
                }
            },
            changCheck(e) {
                this.productInfo.information[e].check = !this.productInfo.information[e].check
            },
            GetGoodsSpecInfo() {
                let data = {
                    goods_id: this.goods_id,
                    keyword: this.$route.query.keyword ?? ""
                }
                let activeJump = true;
                getGoodsSpecInfo(data).then(res => {
                    if (res.data.length) {
                        res.data.map(item => {
                            item.model_list.map((items, index) => {
                                if (index == 0) {
                                    this.priceIndex = items.priceIndex;
                                } else {
                                    items.num = 1
                                    items.old = items.list[items.priceIndex] ?? '';
                                }
                                items.chexk = false;
                                //添加选中跳转
                                if (activeJump && items.search) {
                                    activeJump = false;
                                    setTimeout(() => {
                                        let targetDom = document.getElementById("model_item_" + items.id);
                                        let targetScrollTop = targetDom.offsetTop - 50;
                                        if (document.documentElement) {
                                            document.documentElement.scrollTop = targetScrollTop;
                                        }
                                        if (window) {
                                            window.pageYOffset = targetScrollTop;
                                        }
                                        if (document.body) {
                                            document.body.scrollTop = targetScrollTop;
                                        }
                                    }, 200);
                                }
                            })
                        })
                    }
                    this.specList = res.data
                })
            },
            changActiveCheck(index, indexs) {
                this.specList[index].model_list[indexs].chexk = !this.specList[index].model_list[indexs].chexk
            },
            GetGoodsInfo() {
                let data = {goods_id: this.goods_id}
                getGoodsInfo(data).then(res => {
                    res.data.text_list = [{title: '参数规格', id: 0}, ...res.data.text_list]
                    if (res.data.information.length) {
                        res.data.information.map(item => {
                            item.check = false
                        })
                    }
                    this.productInfo = res.data
                })
            },
            GetGoodsTextInfo() {
                let data = {id: this.activeId}
                getGoodsTextInfo(data).then(res => {
                    this.productTextInfo = res.data.info
                })
            },
            changActive(e) {
                this.activeId = e
                if (this.activeId) {
                    this.GetGoodsTextInfo()
                }
            },
            searchModel(item) {

            }
        },
        watch: {
            $route(to, form) {
                if (to.query.goods_id != form.query.goods_id) {
                    this.goods_id = to.query.goods_id
                    this.GetGoodsInfo()
                    this.GetGoodsSpecInfo()
                }
            }
        }
    }
</script>

<style scoped lang="less">
    .group_chang_infos_box {
        width: 1200px;
        margin: 0 auto;
        padding: 11px 0 40px;
        
        .info_chang_search {
            width: 1200px;
            display: flex;
            cursor: pointer;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 33px;
            
            .tabs {
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #000000;
                width: calc(100% - 560px);
                display: flex;
                
                .tabs-label {
                    width: 76px;
                }
                
                .tabs-items {
                    width: calc(100% - 76px);
                    display: flex;
                    flex-wrap: wrap;
                    color: #333333;
                    
                    .tabs-item {
                        margin-right: 5px;
                    }
                }
            }
        }
        
        .banner_infos {
            .product_banner_box {
                display: flex;
                justify-content: space-between;
                
                .product_banner {
                    width: 945px;
                    height: 510px;
                    
                    .swiper {
                        position: relative;
                        height: 100%;
                        
                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                        
                        .swiper-pagination {
                            bottom: 30px;
                            
                            /deep/ .swiper-pagination-bullet {
                                width: 32px;
                                height: 4px;
                                background: #E9E9E9;
                                opacity: 1;
                                border-radius: 0;
                                margin-right: 20px;
                            }
                            
                            /deep/ .swiper-pagination-bullet-active {
                                background: #B11E24;
                            }
                        }
                    }
                }
                
                .other_product {
                    width: 230px;
                    height: 510px;
                    
                    .title_info {
                        display: flex;
                        align-items: center;
                        margin-bottom: 21px;
                        
                        .line {
                            width: 4px;
                            height: 18px;
                            background: #B11E24;
                            margin-right: 8px;
                        }
                        
                        .title_txt {
                            font-size: 16px;
                            font-family: Microsoft YaHei;
                            font-weight: bold;
                            color: #000000;
                        }
                    }
                    
                    .outher {
                        height: 467px;
                        overflow-y: scroll;
                        cursor: pointer;
                        
                        .box_hout_info {
                            width: 217px;
                            margin-bottom: 20px;
                            
                            .box_img {
                                height: 150px;
                                background: rgba(0, 0, 0, 0);
                                border: 1px solid #E9E9E9;
                                box-sizing: border-box;
                                
                                .img_box {
                                    width: 100%;
                                    height: 100%;
                                    object-fit: cover;
                                }
                            }
                            
                            .title_json {
                                margin: 10px auto 0;
                                
                                .titles {
                                    font-size: 14px;
                                    font-family: Microsoft YaHei;
                                    font-weight: 400;
                                    color: #000000;
                                    margin-bottom: 7px;
                                }
                                
                                .jsons {
                                    font-size: 14px;
                                    font-family: Microsoft YaHei;
                                    font-weight: 400;
                                    line-height: 20px;
                                    color: #000000;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    display: -webkit-box;
                                    -webkit-line-clamp: 3;
                                    white-space: pre-wrap;
                                    -webkit-box-orient: vertical;
                                }
                            }
                        }
                    }
                    
                    .outher::-webkit-scrollbar { /*滚动条整体样式*/
                        width: 3px; /*高宽分别对应横竖滚动条的尺寸*/
                        height: 1px;
                    }
                    
                    .outher::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
                        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
                        background: #B11E24;
                    }
                    
                    .outher::-webkit-scrollbar-track { /*滚动条里面轨道*/
                        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
                        background: #E9E9E9;
                    }
                }
            }
        }
        
        .tab_infos {
            display: flex;
            margin-top: 30px;
            flex-wrap: wrap;
            cursor: pointer;
            background: #F7F7F7;
            
            .tab_box {
                margin-bottom: 1px;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 221px;
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #666666;
                text-align: center;
                position: relative;
                height: 42px;
                
                &:hover {
                    background: #c9595d;
                    color: #FFFFFF;
                    
                    &:after, &::after {
                        width: 0;
                    }
                }
                
                
                &:after, &::after {
                    content: "";
                    position: absolute;
                    right: 0;
                    width: 1px;
                    background-color: #d2d2d2;
                    height: 18px;
                }
            }
            
            .tar_bg {
                /*background: #0670DB;*/
                
                &:after, &::after {
                    width: 0;
                }
            }
            
            .active_chang {
                background: #B11E24;
                color: #FFFFFF;
                
                &:hover {
                    background: #B11E24;
                }
                
                &:after, &::after {
                    width: 0;
                }
                
                &:before, &::before {
                    content: "";
                    position: absolute;
                    width: 10px;
                    height: 10px;
                    transform: rotate(45deg) translateX(-50%);
                    bottom: -8px;
                    left: 50%;
                    background: #B11E24;
                }
            }
        }
        
        .product_content {
            margin-top: 30px;
            
            .box_chilid_one {
                .el-dropdown-link {
                    color: #000000;
                }
                
                .product_title_infos {
                    font-size: 16px;
                    font-family: Microsoft YaHei;
                    font-weight: bold;
                    color: #000000;
                    margin-bottom: 19px;
                }
                
                .rich_text {
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    line-height: 24px;
                    color: #000000;
                    margin-bottom: 33px;
                    
                    /deep/ img {
                        max-width: 100%;
                        height: auto;
                    }
                }
            }
        }
        
        .box_info_spec_content {
            cursor: pointer;
            
            .spec_info {
                margin-bottom: 40px;
                
                .info_title {
                    font-size: 16px;
                    font-family: Microsoft YaHei;
                    font-weight: bold;
                    color: #000000;
                    margin-bottom: 29px;
                }
                
                .info_caser_infos {
                    display: flex;
                    margin-bottom: 40px;
                    
                    img {
                        width: 264px;
                        height: 196px;
                        margin-right: 30px;
                    }
                    
                    .spec_titles {
                        font-size: 14px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        line-height: 24px;
                        color: #000000;
                        width: calc(100% - 300px);
                        
                        .spec_infos {
                            white-space: pre-wrap;
                        }
                    }
                }
                
                .tab_spec_infos {
                    margin-bottom: 20px;
                    
                    .tab_item_infos {
                        padding: 9px 10px;
                        display: flex;
                        margin: 0 -10px;
                        
                        .car_tabs {
                            text-align: center;
                            align-items: center;
                            display: flex;
                            justify-content: center;
                            
                            .last_child {
                                display: flex;
                            }
                            
                            .ar_btns {
                                width: 69px;
                                height: 28px;
                                background: #000000;
                                font-size: 12px;
                                font-family: Microsoft YaHei;
                                font-weight: 400;
                                line-height: 28px;
                                color: #FFFFFF;
                                text-align: center;
                            }
                            
                            .adre_box_infs {
                                width: 69px;
                                height: 28px;
                                box-sizing: border-box;
                                border: 1px solid #000000;
                                margin-right: 8px;
                                display: flex;
                                
                                input {
                                    width: 36px;
                                    border: none;
                                    outline: none;
                                    text-align: center;
                                }
                                
                                .num_box {
                                    width: 33px;
                                    border-left: 1px solid #000000;
                                    box-sizing: border-box;
                                    
                                    div {
                                        width: 100%;
                                        height: 50%;
                                        text-align: center;
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                        
                                        img {
                                            width: 7px;
                                            height: 6px;
                                        }
                                    }
                                }
                                
                                
                            }
                            
                            .contan_tasb {
                                font-size: 12px;
                                font-family: Microsoft YaHei;
                                font-weight: 400;
                                color: #000000;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                display: -webkit-box;
                                -webkit-line-clamp: 3;
                                -webkit-box-orient: vertical;
                            }
                            
                            &:first-child {
                                display: flex;
                                align-items: center;
                                justify-content: flex-start;
                                
                                .contan_tasb {
                                    img {
                                        width: 8px;
                                        margin-right: 10px;
                                    }
                                }
                            }
                            
                            &:last-child {
                                display: flex;
                                align-items: center;
                                justify-content: flex-end;
                            }
                        }
                        
                        &.search {
                            background-color: #F8AE70;
                            
                            .car_tabs {
                                .adre_box_infs {
                                    input {
                                        background-color: #F8AE70;
                                    }
                                }
                            }
                        }
                    }
                    
                    .active_tab {
                        background: #000000;
                        color: #FFFFFF;
                        
                        .car_tabs {
                            font-size: 14px;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            color: #FFFFFF;
                            text-align: center;
                        }
                    }
                    
                    .box_chang_modor {
                        overflow: hidden;
                        transition: all 0.3s linear;
                        padding: 0 10px;
                        
                        &.even {
                            background-color: #EBEBEB;
                        }
                        
                        &.odd {
                            background-color: #F6F6F6;
                        }
                        
                        &.active_height {
                            max-height: 999px;
                            transition: all 0.3s linear;
                            
                            .car_tabs .ar_btns {
                                background: #B11E24;
                            }
                            
                            .chang_tab_list_infos {
                                display: block;
                                height: auto;
                            }
                            
                            .search {
                                border-bottom: 0;
                            }
                        }
                        
                        .chang_tab_list_infos {
                            height: 0;
                            display: none;
                            transition: height 10000ms linear;
                            margin: 10px 0;
                        }
                        
                        &.active_tab {
                            .car_tabs:last-child {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                            }
                        }
                    }
                    
                    .chang_tab_list_infos {
                        width: 100%;
                        background: #FFFFFF;
                        border: 1px solid #9D9D9D;
                        box-sizing: border-box;
                        padding: 29px 30px 39px;
                        position: relative;
                        
                        .json_infos {
                            font-size: 14px;
                            font-family: Microsoft YaHei;
                            font-weight: bold;
                            color: #000000;
                            white-space: pre-wrap;
                        }
                        
                        .splect_model {
                            display: flex;
                            flex-wrap: wrap;
                            margin-bottom: 20px;
                            border: 1px #d9d9d9 solid;
                            border-right: 0;
                            border-bottom: 0;
                            
                            .mode_list {
                                width: calc(50% - 1px);
                                display: flex;
                                border: 1px #d9d9d9 solid;
                                border-top: 0;
                                border-left: 0;
                                line-height: 14px;
                                
                                .item-lable {
                                    width: 140px;
                                    font-weight: bold;
                                    margin-right: 10px;
                                    padding: 8px 10px;
                                }
                                
                                .item-value {
                                    width: calc(100% - 160px);
                                    padding: 5px 10px;
                                }
                            }
                            
                            .mode_list:nth-child(3n) {
                                margin-right: 0;
                            }
                        }
                        
                        .download_btn {
                            display: flex;
                            
                            div {
                                width: 178px;
                                height: 43px;
                                background: #9D9D9D;
                                margin-right: 30px;
                                line-height: 43px;
                                text-align: center;
                                font-size: 16px;
                                font-family: Microsoft YaHei;
                                font-weight: 400;
                                color: #FFFFFF;
                            }
                            
                            div:first-child {
                                background: #B11E24;
                            }
                        }
                        
                        .close_info {
                            width: 18px;
                            height: 18px;
                            position: absolute;
                            top: 10px;
                            right: 10px;
                        }
                    }
                }
            }
        }
        
        .city_location_box {
            position: fixed;
            width: 100%;
            height: 100vh;
            background: rgba(0, 0, 0, 0.21);
            left: 0;
            bottom: 0;
            z-index: 5;
            
            .location_box {
                width: 480px;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                border: 1px solid #9D9D9D;
                padding: 32px 0 28px;
                z-index: 6;
                background: #FFFFFF;
                
                .tips_title {
                    font-size: 16px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #000000;
                    margin-bottom: 17px;
                    text-align: center;
                }
                
                .line {
                    width: 477px;
                    height: 2px;
                    background: #E9E9E9;
                    //border: 1px solid #E9E9E9;
                    box-sizing: border-box;
                    margin-bottom: 37px;
                }
                
                .content_box_infos {
                    padding: 0 13px;
                    display: flex;
                    flex-wrap: wrap;
                    margin-bottom: 27px;
                    
                    .chec_box_ounte {
                        margin-right: 28px;
                        margin-bottom: 17px;
                        display: flex;
                        align-items: center;
                        cursor: pointer;
                        
                        .check_box {
                            width: 14px;
                            height: 14px;
                            background: #FFFFFF;
                            border: 1px solid #C7C7C7;
                            box-sizing: border-box;
                            margin-right: 6px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            
                            img {
                                width: 14px;
                                height: 12px;
                            }
                        }
                        
                        .check_name {
                            font-size: 14px;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            color: #000000;
                        }
                    }
                }
                
                .tips_btn {
                    width: 136px;
                    height: 42px;
                    background: #B11E24;
                    font-size: 16px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    line-height: 42px;
                    color: #FFFFFF;
                    text-align: center;
                    margin: 0 auto 10px;
                    cursor: pointer;
                }
                
                .tips_info {
                    font-size: 12px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #C7C7C7;
                    text-align: center;
                }
                
                .close {
                    width: 18px;
                    height: 18px;
                    position: absolute;
                    z-index: 7;
                    right: 10px;
                    cursor: pointer;
                    top: 10px;
                }
            }
        }
        
        .city_location_box_infos {
            position: fixed;
            width: 100%;
            height: 100vh;
            background: rgba(0, 0, 0, 0.21);
            left: 0;
            bottom: 0;
            z-index: 5;
            
            .location_box {
                width: 480px;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                border: 1px solid #9D9D9D;
                z-index: 6;
                background: #FFFFFF;
                height: 331px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 8px;
                
                .colses {
                    position: absolute;
                    top: 10px;
                    right: 10px;
                    width: 18px;
                    height: 18px;
                }
                
                .login_icons {
                    text-align: center;
                    
                    img {
                        width: 68px;
                        height: 68px;
                        margin-bottom: 20px;
                    }
                    
                    div {
                        font-size: 20px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #000000;
                    }
                }
            }
        }
    }
</style>
